<template>
	<div id="Weather">
		<van-nav-bar fixed placeholder @click-left="$router.go(-1)" left-arrow title="天气预报"></van-nav-bar>
		<van-cell title="选择你要查看的地区" is-link @click="showCheckArea=true" :value="activeCity"></van-cell>
		<van-popup :close-on-click-overlay="false" v-model="showCheckArea" position="bottom" round  style="height:40%">
			<van-area @cancel="showCheckArea=false" title="选择地区" :area-list="areaList" @confirm="confirmArea" />
		</van-popup>
		<!-- 卡片 -->
		<div class="cards">
			<div class="card-inline" v-for="(item,index) in weathers" :key="index">
				<div class="itemBox">
					<div>{{item.date}}</div>
					<div>星期{{item.week}}</div>
				</div>
				<div class="itemBox">
					<div>日间气温：{{item.daytemp}}</div>
					<div>夜间气温：{{item.nighttemp}}</div>
				</div>
				<div class="itemBox">
					<div>{{item.nightweather}}</div>
					<div class="wind">
						<div>风向：{{item.nightwind}}</div>
						<div>风力：{{item.nightpower}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { areaList } from '@vant/area-data';
	export default {
		data() {
			return {
				areaList,
				showCheckArea:false,
				weathers:[],
				activeCity:"当前未选择城市"
			}
		},
		methods:{
			async confirmArea(columns){
				this.activeCity=columns[2].name	
				const res=await this.$store.dispatch("loadWeather",{cityCode:columns[2].code})
				this.weathers=res.data.forecasts[0]["casts"]
				this.showCheckArea=false
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "../scss/GLOBAL.scss";
#Weather {
	user-select: none;
	::v-deep {
		.van-nav-bar {
			background-color: $themeColor;
			.van-nav-bar__title {
				color: #fff;
			}
			.van-icon {
				color:#fff;
			}
		}
	}
	.cards {
		padding: .625em .94em;
		.card-inline {
			border-radius: 4px;
			background-color: #0AA1ED;
			color: #fff;
			margin-bottom: .325em;
			padding: 0 0.94em;
			.itemBox {
				padding: .325em 0;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.wind {
					display: flex;
					align-items: center;
					>div {
						margin-left: .625em;
					}
				}
			}
		}
	}
}
</style>